<template>
  <div>
    <!-- 1.0 导航栏 -->
    <van-nav-bar
      title="编辑资料"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 2.0 用户头像 -->
    <div class="avatar">
      <!-- van-uploader 组件嵌套我们原本的图片结构 - 自定义上传样式 -->
      <!-- after-read	文件读取完成后的回调函数 -->
      <van-uploader :after-read="afterRead">
        <!-- 我们原本的头像布局，成功的验证：点击图片会弹出文件选中窗口 -->
        <img
          v-if="head_img"
          class="avatar_image"
          :src="$baseURL+head_img"
          alt=""
        >
        <img
          v-else
          class="avatar_image"
          src="@/assets/logo.png"
          alt=""
        >
      </van-uploader>
    </div>
    <div class="divider"></div>
    <!-- 3.0 用户信息单元格 -->
    <van-cell-group>
      <van-cell
        title="昵称"
        :value="nickname"
        is-link
        @click="nickNameShow=true"
      />
      <van-cell
        title="密码"
        value="*****"
        @click="passwordShow=true"
        is-link
      />
      <van-cell
        title="性别"
        :value="gender === 0 ? '🤷‍♀️女' : '👦男'"
        is-link
        @click="genderShow=true"
      />
    </van-cell-group>
    <!-- 随便找个位置即可，因为最终是通过定位的方式显示到页面中 -->
    <!-- 1.0 为修改昵称准备一个弹窗 -->
    <van-dialog
      v-model="nickNameShow"
      title="修改昵称"
      show-cancel-button
      @confirm="upDateInfoHandle('nickname',nicknameTemp)"
    >
      <van-field
        v-model="nicknameTemp"
        label="昵称"
        placeholder="请输入新昵称"
      />
    </van-dialog>
    <!-- 2.0 为修改密码准备一个弹窗 -->
    <van-dialog
      v-model="passwordShow"
      title="修改密码"
      show-cancel-button
      @confirm="upDateInfoHandle('password',passwordTemp)"
    >
      <!-- type="password" 变成密码框 -->
      <van-field
        v-model="passwordTemp"
        label="密码"
        type="password"
        placeholder="请输入新密码"
      />
    </van-dialog>
    <!-- 3.0 准备一个动作面板，用于修改性别 -->
    <!-- 
      van-action-sheet 组件属性解读
        v-model="genderShow"           布尔值，是否显示动作面板
        :actions="genderActions"       数组，动作面板显示的数据
        @select="genderSelectHandle"   点击某个选项的时候触发的事件处理函数
        close-on-click-action          点击某个选项的时候自动关闭动作面板
        cancel-text="取消"             显示取消按钮
    -->
    <van-action-sheet
      v-model="genderShow"
      :actions="genderActions"
      @select="genderSelectHandle"
      close-on-click-action
      cancel-text="取消"
    />
  </div>
</template>

<script>
import { uploadFile, userDetail, userUpdate } from "@/api";
import { getUserInfo } from "@/utils/myToken";
export default {
  data() {
    return {
      nickNameShow: false,
      // 临时的昵称，当用户点击确定的时候才更新昵称
      nicknameTemp: "",
      nickname: "",
      // 密码数据准备
      passwordShow: false,
      passwordTemp: "",
      // 性别修改数据准备
      genderShow: false,
      // name 是组件要求的固定写法，用于展示在动作面板上的文字
      genderActions: [
        // name 属性用于展示，gender 属性用于API提交
        { name: "帅哥", gender: 1 },
        { name: "美女", gender: 0 },
      ],
      // 用户信息
      head_img: "",
      gender: 0,
      // 用户 id 保存起来方便以后修改的时候使用
      id: 0,
    };
  },
  // 组件加载完毕
  mounted() {
    this.getCurrUserDetail();
  },
  // 方法 - 封装
  methods: {
    // 获取动作面板数据的事件处理函数，从形参 e 中解构出 { gender }，用于更新性别
    genderSelectHandle({ gender }) {
      // console.log("获取动作面板数据的事件处理函数", e);
      // console.log("性别的参数", gender);
      this.upDateInfoHandle("gender", gender);
    },
    // upDateInfoHandle('password',this.passwordTemp)
    // 更新用户资料的函数
    upDateInfoHandle(key, value) {
      userUpdate({
        id: this.id,
        // 这里的参数不能写死，需同时实现更新 昵称 和 密码
        // password: this.passwordTemp,
        // nickname: this.nicknameTemp,
        [key]: value,
      }).then((res) => {
        // 重新获取用户资料并且在页面中更新
        this.getCurrUserDetail();
        // 弹出修改成功的提示框
        this.$toast.success(res.data.message);
      });
    },
    // // 更新密码的事件处理函数
    // passwordHandle() {
    //   // console.log("更新密码的事件处理函数被调用了");
    //   userUpdate({
    //     id: this.id,
    //     // 把临时密码提交到服务器，更新密码
    //     password: this.passwordTemp,
    //   }).then((res) => {
    //     console.log(res);
    //     // 获取最新用户资料
    //     this.getCurrUserDetail();
    //   });
    // },
    // // @confirm="nickNameHandle" 点击了确定按钮触发
    // nickNameHandle() {
    //   // console.log("你点击了确定按钮");
    //   // 1. 获取到临时昵称
    //   // console.log("获取到临时昵称", this.nicknameTemp);
    //   // 2. 发送请求临时昵称更新到服务器(接口)，变成新的昵称
    //   userUpdate({
    //     id: this.id,
    //     nickname: this.nicknameTemp,
    //   }).then((res) => {
    //     // console.log("更新用户资料接口调用成功", res);
    //     // 3. 获取最新用户资料
    //     this.getCurrUserDetail();
    //   });
    // },
    // 文件读取完成后的回调函数
    /* 
      content 参数为 base64 的图片
        - 常用于本地预览，对应的业务一般是，点击上传按钮后才上传真实的图片参数
      file 参数为 文件对象
        - 记得配合 formData 对象使用，通过 append 把图片对象添加到 formData 中
    */
    afterRead({ content, file }) {
      // console.log("文件读取完成后的回调函数", e);
      // this.head_img = content;
      // 我们项目中如何实现修改图片功能
      // 1. 获取到用户上传的图片对象 { file }
      // 2. 准备把图片对象上传到服务器的 formdata 对象
      const fd = new FormData();
      fd.append("file", file);
      // 3. 发送网络请求上传图片
      uploadFile(fd).then((res) => {
        // console.log(res);
        // 5. 从服务的返回的数据中，获取到图片的相对路径
        const head_img = res.data.data.url;
        // 5. 把最新的图片路径展示到模板中
        this.head_img = head_img;
        // 🚩 6. 最后记得更新用户头像数据，否则：会出现页面刷新的时候还是原来的头像的bug
        userUpdate({
          id: this.id, // id 为必传参数
          head_img: head_img, // 把最新的图片相对路径更新到用户信息中
        }).then((res) => {
          // console.log(res);
          // 如果修改成功，给用户一个轻提示
          if (res.data.message === "修改成功") {
            this.$toast.success("更新头像成功");
          }
        });
      });
    },
    // 获取当前用户详情数据
    getCurrUserDetail() {
      // 从本地存储中获取用户 id
      const { id } = getUserInfo();
      // 把获取到的 id 保存到 data 中，方便其他地方使用
      this.id = id;
      // console.log(id);
      // 根据用户 id 发送请求获取用户详情数据
      userDetail(id).then((res) => {
        // console.log(res);
        // 从返回值中提取出需要呈现在页面的数据
        const { nickname, head_img, gender } = res.data.data;
        // 更新到 data 中 - 可在 Vue 调试工具的面板中检查数据
        this.nickname = nickname;
        this.head_img = head_img;
        this.gender = gender;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.avatar {
  height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  .avatar_image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid #ddd;
    // object-fit：CSS3 可以让图片不变形
    object-fit: cover;
  }
}
</style>